<template>
  <div class="app-container">
    <!-- 顶部标题 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-select v-model="selectedFactory" placeholder="请选择水厂">
            <el-option v-for="factory in factories" :key="factory.value" :label="factory.label"
              :value="factory.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="16">
          <el-date-picker v-model="dateRange" type="datetimerange" start-placeholder="Start date"
            end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss" />

        </el-col>
      </el-row>
    </el-card>

    <!-- 主要统计指标 -->
    <el-row :gutter="20" class="metric-row mt-2">
      <!-- 水质统计 -->
      <el-col :span="6">
        <el-card class="metric-card">
          <h3 class="card-title">水质统计</h3>

          <!-- pH值 -->
          <div class="metric-item">
            <div class="metric-header">
              <span class="metric-title">pH值</span>
              <span class="metric-trend trend-up">+0.1</span>
            </div>
            <div class="metric-value">7.2</div>
            <div class="metric-footer">
              <span class="metric-status status-normal">正常范围</span>
            </div>
          </div>

          <!-- 杂质 -->
          <div class="metric-item">
            <div class="metric-header">
              <span class="metric-title">杂质(mg/L)</span>
            </div>
            <div class="metric-value">0.5</div>
            <div class="metric-footer">
              <span class="metric-status status-normal">正常</span>
            </div>
          </div>

          <!-- 浊度 -->
          <div class="metric-item">
            <div class="metric-header">
              <span class="metric-title">浊度(NTU)</span>
            </div>
            <div class="metric-value">0.8</div>
            <div class="metric-footer">
              <span class="metric-status status-good">达标</span>
            </div>
          </div>

          <!-- COD -->
          <div class="metric-item">
            <div class="metric-header">
              <span class="metric-title">COD(mg/L)</span>
            </div>
            <div class="metric-value">12.5</div>
            <div class="metric-footer">
              <span class="metric-status status-good">达标</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 供水统计 -->
      <el-col :span="6">
        <el-card class="metric-card">
          <h3 class="card-title">供水统计</h3>

          <!-- 日供水量 -->
          <div class="metric-item">
            <div class="metric-header">
              <span class="metric-title">日供水量(万吨)</span>
              <span class="metric-trend trend-up">+3.2%</span>
            </div>
            <div class="metric-value">25.6</div>
          </div>

          <!-- 累计供水量 -->
          <div class="metric-item">
            <div class="metric-header">
              <span class="metric-title">累计供水量(万吨)</span>
              <span class="metric-trend trend-up">+5.8%</span>
            </div>
            <div class="metric-value">8,256</div>
          </div>

          <!-- 供水压力 -->
          <div class="metric-item">
            <div class="metric-header">
              <span class="metric-title">供水压力(MPa)</span>
            </div>
            <div class="metric-value">0.35</div>
            <div class="metric-footer">
              <span class="metric-status status-stable">稳定</span>
            </div>
          </div>

          <!-- 漏损率 -->
          <div class="metric-item">
            <div class="metric-header">
              <span class="metric-title">漏损率(%)</span>
            </div>
            <div class="metric-value">8.2</div>
            <div class="metric-footer">
              <span class="metric-status status-warning">需优化</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 成本统计 -->
      <el-col :span="6">
        <el-card class="metric-card">
          <h3 class="card-title">成本统计</h3>

          <!-- 单位成本 -->
          <div class="metric-item">
            <div class="metric-header">
              <span class="metric-title">单位成本(元/吨)</span>
              <span class="metric-trend trend-down">-0.8%</span>
            </div>
            <div class="metric-value">1.25</div>
          </div>

          <!-- 药剂成本 -->
          <div class="metric-item">
            <div class="metric-header">
              <span class="metric-title">药剂成本(万元)</span>
              <span class="metric-trend trend-up">+2.1%</span>
            </div>
            <div class="metric-value">56.8</div>
          </div>

          <!-- 人工成本 -->
          <div class="metric-item">
            <div class="metric-header">
              <span class="metric-title">人工成本(万元)</span>
              <span class="metric-trend trend-down">-3.2%</span>
            </div>
            <div class="metric-value">128.5</div>
          </div>
        </el-card>
      </el-col>

      <!-- 待办任务 -->
      <el-col :span="6">
        <el-card class="metric-card">
          <h3 class="card-title">待办任务</h3>

          <!-- 任务1 -->
          <div class="task-item status-urgent">
            <div class="task-header">
              <span class="task-title">2号泵站压力异常</span>
              <el-tag type="danger" size="small">高效完成</el-tag>
            </div>
            <div class="task-time">10分钟前</div>
          </div>

          <!-- 任务2 -->
          <div class="task-item status-normal">
            <div class="task-header">
              <span class="task-title">水质检测报告审核</span>
              <el-tag type="success" size="small">完成</el-tag>
            </div>
            <div class="task-time">30分钟前</div>
          </div>

          <!-- 任务3 -->
          <div class="task-item status-planned">
            <div class="task-header">
              <span class="task-title">3号滤池维护工单</span>
              <el-tag type="info" size="small">计划性</el-tag>
            </div>
            <div class="task-time">1小时前</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第三行：图表 -->
    <el-card>
      <el-row :gutter="20" class="metric-row">
        <el-col :span="24">
          <h3 class="card-title">水厂运营指标分析</h3>
          <el-radio-group v-model="selectedValue" style="margin: 20px 0 40px 0;" @change="handleRadioChange">
            <el-radio-button label="water_quality">水质指标</el-radio-button>
            <el-radio-button label="production">生产指标</el-radio-button>
            <el-radio-button label="cost">成本指标</el-radio-button>
            <el-radio-button label="equipment">设备指标</el-radio-button>
            <el-radio-button label="work_order">工单指标</el-radio-button>
            <el-radio-button label="safety">安全指标</el-radio-button>
          </el-radio-group>
        </el-col>
        <!-- 水质趋势图 -->
        <el-col :span="14">
          <!-- <div ref="trendChart" style="height: 300px;"></div> -->
          <ECharts :option="option[0]" />
        </el-col>
        <!-- 达标率 -->
        <el-col :span="10">
          <!-- <div ref="complianceChart" style="height: 300px;"></div> -->
          <ECharts :option="option[1]" />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import ECharts from '@/components/ECharts/index.vue';
import { line } from '@meta2d/core/src/diagrams';

const selectedValue = ref('water_quality');


// 示例工厂数据
const factories = [
  { label: '城东水厂', value: 'east_water_plant' },
  { label: '城西水厂', value: 'west_water_plant' },
  { label: '城南水厂', value: 'south_water_plant' },
  { label: '城北水厂', value: 'north_water_plant' }
];

// 绑定选中的工厂
const selectedFactory = ref('');

// 绑定日期范围
const dateRange = ref(['2023-06-01', '2023-06-30']);

const chartOptions = {
  'water_quality': [
    {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['pH值', '浊度', '杂质', 'COD']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1日', '5日', '10日', '15日', '20日', '25日', '30日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'pH值',
          type: 'line',
          data: [7.0, 7.1, 7.2, 7.3, 7.2, 7.1, 7.2],
          smooth: true,
          lineStyle: {
            color: '#5470C6'
          }
        },
        {
          name: '浊度',
          type: 'line',
          data: [1.2, 1.0, 0.9, 0.8, 0.7, 0.8, 0.8],
          smooth: true,
          lineStyle: {
            color: '#91CC75'
          }
        },
        {
          name: '杂质',
          type: 'line',
          data: [0.8, 0.7, 0.6, 0.5, 0.4, 0.5, 0.5],
          smooth: true,
          lineStyle: {
            color: '#EE6666'
          }
        },
        {
          name: 'COD',
          type: 'line',
          data: [15, 14, 13, 12, 13, 12.5, 12.5],
          smooth: true,
          lineStyle: {
            color: '#FAC858'
          }
        }
      ]
    },
    {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '水质达标率',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 92, name: '达标' },
            { value: 8, name: '不达标' }
          ],
          color: ['#67C23A', '#F56C6C']
        }
      ]
    }
  ],
  'production': [
    {
      title: {
        text: '日供水量趋势',
        left: 'center',
        textStyle: {
          fontSize: 18,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: '{b}<br/>供水量: {c} 万吨'
      },
      grid: {
        left: '15%',
        right: '5%',
        bottom: '15%',
        top: '20%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
        axisLabel: {
          interval: 0
        }
      },
      yAxis: {
        type: 'value',
        name: '万吨',
        min: 0,
        max: 30,
        interval: 5,
        axisLabel: {
          formatter: '{value}'
        }
      },
      series: [{
        name: '供水量',
        type: 'bar',
        barWidth: '40%',
        data: [22, 24, 25.5, 23, 26, 27, 24],
        itemStyle: {
          color: function (params) {
            // 10日的数据使用不同颜色突出显示
            return params.dataIndex === 2 ? '#1890FF' : '#36cfc9';
          },
          borderRadius: [4, 4, 0, 0] // 顶部圆角
        },
        label: {
          show: true,
          position: 'top',
          formatter: function (params) {
            // 只在10日显示具体数值
            return params.dataIndex === 2 ? params.value : '';
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    },
    {
      title: {
        text: '产能利用率',
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['设计产能', '实际产能']
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1日', '5日', '10日', '15日', '20日', '25日', '30日']
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 30,
        interval: 5,
        axisLabel: {
          formatter: '{value} 万吨'
        }
      },
      series: [
        {
          name: '设计产能',
          type: 'line',
          data: [30, 30, 30, 30, 30, 30, 30],
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            color: '#cccccc'
          }
        },
        {
          name: '实际产能',
          type: 'line',
          data: [24.5, 25, 25.5, 26, 26.5, 26, 25.5],
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            color: '#1890ff'
          }
        }
      ]
    }
  ],
  'cost': [
    {
      title: {
        text: '成本构成分析',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['电费', '药剂', '人工', '维护']
      },
      series: [
        {
          name: '成本构成',
          type: 'pie',
          radius: '50%',
          center: ['50%', '50%'],
          data: [
            { value: 40, name: '电费' },
            { value: 30, name: '药剂' },
            { value: 20, name: '人工' },
            { value: 10, name: '维护' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    },
    {
      title: {
        text: '单位成本对比',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 1.5,
        interval: 0.3,
        axisLabel: {
          formatter: '{value} 元/吨'
        }
      },
      series: [
        {
          name: '单位成本',
          type: 'line',
          data: [1.28, 1.25, 1.22, 1.23, 1.21, 1.22],
          symbol: 'circle',
          symbolSize: 8,
          smooth: true
        }
      ]
    }
  ],
  'equipment': [
    {
      title: {
        text: '设备运行状态',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['正常运行', '维护中', '故障']
      },
      series: [
        {
          name: '设备运行状态',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 80, name: '正常运行' },
            { value: 10, name: '维护中' },
            { value: 10, name: '故障' }
          ]
        }
      ]
    },
    {
      title: {
        text: '设备故障率趋势',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 7,
        interval: 1,
        axisLabel: {
          formatter: '{value} %'
        }
      },
      series: [
        {
          name: '设备故障率',
          type: 'line',
          data: [6.5, 5.8, 5.2, 4.9, 5.1, 4.8],
          symbol: 'circle',
          symbolSize: 8,
          smooth: true,
        }
      ]
    }
  ],
  'work_order': [
    {
      title: {
        text: '工单处理效率',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 10,
        interval: 2,
        axisLabel: {
          formatter: '{value} 小时'
        }
      },
      series: [
        {
          name: '工单处理效率',
          type: 'bar',
          data: [8.5, 7.8, 7.2, 6.5, 6.0, 5.5],
          itemStyle: {
            color: '#2f97ff'
          }
        }
      ]
    },
    {
      title: {
        text: '工单完成率',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: '{value} %'
        }
      },
      series: [
        {
          name: '工单完成率',
          type: 'line',
          data: [90, 92, 94, 96, 98, 100],
          symbol: 'circle',
          symbolSize: 8,
          smooth: true,
          lineStyle: {
            color: '#1890ff'
          }
        }
      ]
    }
  ],
  'safety': [
    {
      title: {
        text: '安全事故统计',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 3,
        interval: 0.5,
        axisLabel: {
          formatter: '{value} 次数'
        }
      },
      series: [
        {
          name: '安全事故',
          type: 'bar',
          data: [3, 2, 1, 2, 1, 0],
          itemStyle: {
            color: '#ff4d4f'
          }
        }
      ]
    },
    {
      title: {
        text: '隐患整改率',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: '{value} %'
        }
      },
      series: [
        {
          name: '隐患整改率',
          type: 'line',
          data: [85, 90, 95, 97, 98, 100],
          symbol: 'circle',
          symbolSize: 8,
          smooth: true,
          lineStyle: {
            color: '#52c41a'
          }
        }
      ]
    }
  ]
}
const option = ref(chartOptions['water_quality']);

// 处理选项变化事件
const handleRadioChange = (value) => {
  option.value = chartOptions[value];
};


</script>

<style scoped>
.water-quality-dashboard {
  padding: 20px;
}

.dashboard-title {
  margin: 0 0 20px;
  color: #333;
  font-size: 24px;
}

.metric-row {
  margin-bottom: 20px;
}

.metric-card {
  height: 100%;
}

.card-title {
  margin: 0 0 15px;
  color: #333;
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
  margin-bottom: 20px;
}

/* 指标项样式 */
.metric-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.metric-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.metric-title {
  color: #666;
  font-size: 14px;
}

.metric-trend {
  font-size: 12px;
}

.trend-up {
  color: #67C23A;
}

.trend-down {
  color: #F56C6C;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.metric-footer {
  display: flex;
  justify-content: space-between;
}

.metric-status {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.status-normal {
  color: #409EFF;
  background-color: #ecf5ff;
}

.status-good {
  color: #67C23A;
  background-color: #f0f9eb;
}

.status-stable {
  color: #909399;
  background-color: #f4f4f5;
}

.status-warning {
  color: #E6A23C;
  background-color: #fdf6ec;
}

.metric-range {
  color: #909399;
  font-size: 12px;
}

/* 任务项样式 */
.task-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.task-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.task-title {
  font-size: 14px;
}

.task-time {
  color: #909399;
  font-size: 12px;
}

.status-urgent .task-title {
  color: #F56C6C;
}

.status-normal .task-title {
  color: #67C23A;
}

.status-planned .task-title {
  color: #409EFF;
}
</style>